<template>
	<view class="content over-y ff-m box-b bg-f5">
	<view class="my-address-item-box bg-white color-3 f-30 fw-bold" @click="chooseAddress">
			<block v-if="info.address">
				<view class="user-name-phone-box mb-20">
					<text>{{getAddress.real_name}}</text>
					<text class="phone">{{getAddress.phone}}</text>
					<text class="default fw-400 text-center br-15 ml-20" v-if="getAddress.is_default == 1">默认</text>
				</view>
				<view class="f-28 fw-400" style="color: #666;">{{getAddress.province + getAddress.city +getAddress.district +getAddress.detail}}</view>
			</block>
			<view class="f-32 fw-bold color-3 flex-c-c" v-else>+ 添加收货地址</view>
		</view>
	<view class="s-goods-plate-box">
		<view class="shop-goods-plate-box pd-tb-20">
			<!-- 单个门店模块 -->
	<!-- 		<view class="shop-name-box flex-c">
				<image src="../../static/cart_icon/icon2.png" mode=""></image>
				<text>{{item.mer_name}}</text>
				<image src="/static/cart_icon/icon1.png" mode="heightFix"></image>
			</view> -->
			<view class="goods-plate-box">
				<!-- 商品列表 -->
				<view class="store-item-box pd-tb-20">
					<view class="store-logo-box">
						<image :src="info.list.image" mode=""></image>
					</view>
					<view class="store-info-box">
						<view class="store-title-box f-30 fw-bold">
							<text class="ellipsis">{{info.list.store_name}}</text>
							<text>{{info.list.sku}}</text>
						</view>
						<view class="store-txt-box color-3">
							<view class="price-box f-22 fw-bold">
								￥<text>{{info.list.price}}</text>
							</view>
							<view class="add-goods-box flex-d f-30 fw-400">							
								<view class="reduce-box">
									<image @click="chooseNum('reduce')" :src="`/static/cart_icon/icon${number == 1? 8 : 5}.png`" mode=""></image>
								</view>
								<text class="value">{{number}}</text>
								<view class="add-box">
									<image @click="chooseNum('add')" :src="`/static/cart_icon/icon6.png`" mode=""></image>
									<!-- <image :src="newItem.cart_num==newItem.stock?'../../static/cart_icon/icon7.png':'../../static/cart_icon/icon6.png'" mode=""></image> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="title-content-box pd-tb-20">
		<view class="title-box flex-b">
				<text>备注</text>
				<text>{{mark.length}}/45</text>
			</view>
			<view class="content-box">
				<textarea placeholder="请输入备注" maxlength="45" v-model="mark" placeholder-style="color:#CCC"></textarea>
			</view>
		</view>
	</view>
	<view class="total-price-box mt-20">
		<view class="bottom-order-info-box f-30 fw-400 color-3">
			<view class="left-key-box">
				<text>商品价格</text>
				<text>运费</text>
			</view>
			<view class="right-value-box">
				<text>￥{{info.total_integral}}</text>
				<text>￥{{info.express_fee}}</text>
			</view>
		</view>
	</view>
	<view class="bottom-but-box flex-c-b bg-white">
		<view class="f-26 fw-bold color-3">
			待支付:
			{{ showFee? '￥' : '' }}
			<text v-if="showFee" style="font-size: 40rpx;">{{info.express_fee}}</text>
			{{ showFee? '+' : '' }}
			<text style="font-size: 40rpx;">{{total}}</text>
			积分
		</view>
		<view class="buy-box" @click="submitFun">提交订单</view>
	</view>
</view>
</template>

<script>
	export default {
		data(){
			return {
				product_id: '', // 商品id
				unique: '', //	规格id
				number: '', // 数量
				info: {
					list: {
						price: 0
					},
				}, // 订单信息
				// isShow:true,
				mark:'',//字数长度
				addressInfo: {}, // 选中地址
				// userAddress:null,
				// goodsInfo:{},//商品信息
				// data:{}
			}
		},
		onLoad(options) {
			const {
				product_id,
				unique,
				number,
			} = options
			this.product_id = product_id
			this.unique = unique
			this.number = +number
			this.setHallOrder()
			// uni.showLoading({title:"加载中"});
			// this.data = JSON.parse(options.data);
			// this.getCheckStoreOrder();
			// uni.chooseAddress({
			// 	success(res) {
			// 		console.log(res)
			// 	}
			// })
		},
		computed:{
			// 是否展示运费
			showFee: function () {
				const { express_fee } = this.info
				const isShow = express_fee && express_fee != '0' && express_fee != 0
				return isShow
			},
			// 计算总价
			total: function () {
				const { number, info } = this, { price } = info.list
				return price && number? (+number * +price) : 0
			},
			// 计算地址
			getAddress: function () {
				const { addressInfo, info } = this, { address } = info
				const param = addressInfo.address_id? addressInfo : address
				return param
			}
		},
		methods:{
			// 购买数量
			chooseNum: function (type) {
				let { number } = this
				if (number == 1 && type == 'reduce') return
				this.number = type == 'add'? number +=1 : number -=1
				this.setHallOrder()
			},
			// 提交订单
			submitFun: async function () {
				const { total, info, mark, getAddress } = this,
				{ cart_id } = info.list,
				{ address_id } = getAddress,
				param = { cart_id, address_id, mark }
				console.log(param)
				uni.showLoading({ title: '加载中', mask: true })
				const { code, data, message } = await this.$u.api.setHallCreateOrder(param)
				if (code == '1') { 
					console.log('提交订单', data)
					const { pay_type } = data
					console.log(pay_type)
					if (pay_type == 'integral') {
						uni.redirectTo({
							url: '/pageMember/tarbar/submitSuccess?status=1',
						})
					} else {
						const {
							timeStamp,
							nonceStr,
							signType,
							paySign,
						} = data
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp,
							nonceStr,
							package: data.package,
							signType,
							paySign,
							orderInfo: data,
							success: res => {
								uni.showModal({
									title: '支付成功',
									showCancel: false,
									success: () => {
										uni.redirectTo({
											url: '/pageMember/orderList/hallOrderList'
										})
									}
								})
							},
							fail: msg => {
								uni.showModal({
									title: '支付失败',
									showCancel: false,
									success: () => {
										uni.redirectTo({
											url: '/pageMember/orderList/hallOrderList'
										})
									}
								})
							}
						})
					}
				} else {
					this.$showToast(message || '提交订单失败')
				}
			},
			// 创建订单
			setHallOrder: async function () {
				uni.showLoading({ title: '加载中' })
				const {
					product_id,
					unique,
					number,
				} = this, param = { product_id, unique, number }
				const { code, data, message } = await this.$u.api.setHallOrder(param)
				if (code == '1') {
					console.log('创建订单', data)
					this.info = data
					this.number = data.list.cart_num
				} else {
					this.$showToast(message || '创建订单失败')
				}
			},
			// 选择收货地址
			chooseAddress: function () {
				uni.navigateTo({
					url: '/pageMember/tarbar/myAddressList',
					events: {
						changeAddress: data => {
							console.log(data)
							data.address_id && (this.addressInfo = data)
						}
					},
					success: res => {
						res.eventChannel.emit('changeAddress')
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;height: calc(100vh - 150rpx);
		.my-address-item-box{
			padding: 40rpx 20rpx;
			margin-bottom: 20rpx;
			.user-name-phone-box{
				margin-bottom: 20rpx;
				.phone{font-size: 28rpx;margin-left: 20rpx;}
				.default{
					display: inline-block;
					width: 80rpx;height: 30rpx;
					background: #FF5C5C;
					font-size: 22rpx !important;
					color: #FFFFFF !important;
				}
			}
		}
		.s-goods-plate-box{
			padding: 20rpx;background: #fff;
		.shop-goods-plate-box{
			border-bottom: 1rpx solid #F5F5F5;
			.shop-name-box{
				text{padding: 0 10rpx;}
				image{width: 30rpx;height: 30rpx;vertical-align: middle;}
				image:last-child{width: 20rpx; height: 20rpx;}
			}
			.store-item-box{
				display: flex;
				.store-logo-box{flex: 0.35;line-height: 0;image{width: 220rpx;height: 220rpx;border-radius: 10rpx;}}
				.store-info-box{
					flex: 0.65;
					display: flex;flex-direction: column;
					.store-title-box{
						flex: 0.7;
						color: #212121;
						display: flex; flex-direction: column;
						text{max-width: 400rpx;}
						text:last-child{font-size: 28rpx;font-weight: 400;color: #999999;margin-top: 10rpx;}
					}
					.store-txt-box{
						flex: 0.3;
						display: flex;
						.price-box{flex: 0.5;align-self: center;text{font-size: 30rpx;}}
						.add-goods-box{
							flex: 0.5;
							align-self: center;
							color: #393B42;
							line-height: 0;
							.value{width: 80rpx; height: 50rpx; line-height: 50rpx; font-size: 30rpx; text-align: center;}
							.reduce-box{image{width: 50rpx;height: 50rpx;}}
							.add-box{image{width: 50rpx;height: 50rpx;}}
						}
					}
				}
			}
		}
		.title-content-box{
			.title-box{
				padding-bottom: 30rpx;
				text:first-child{font-size: 30rpx;font-weight: bold;color: #333333;}
				text:last-child{font-size: 26rpx;font-weight: 400;color: #999999;}
			}
			.content-box{
				width: 100%;
				textarea{width: 94%;height: 200rpx;padding: 20rpx;background: #F5F6FA;}
			}
		}
	}
		.total-price-box{
			padding: 20rpx;
			padding-bottom: 100rpx;
			background: #fff;
			.bottom-order-info-box{
				display: flex;
				.left-key-box{flex: 0.5;display: flex;flex-direction: column;text{padding-bottom: 20rpx;}}
				.right-value-box{flex: 0.5;display: flex;flex-direction: column;text{padding-bottom: 20rpx; text-align: right;}}
			}
		}
		.bottom-but-box{
			width: 100%;
			padding: 20rpx 20rpx;
			padding-bottom: 50rpx;
			position: fixed;bottom: 0;z-index: 100;
			.buy-box{padding: 20rpx 50rpx;background: #000;color: #fff;border-radius: 50rpx;}
		}
	}
</style>